<template>
  <div id="app">
    <my-header @setCom="changeCom"></my-header>

    <div class="myBody">
      <router-view></router-view>
    </div>

    <my-footer></my-footer>



 <!-- <transition> -->
    <my-dialog>

        <component :is="com"></component>

    </my-dialog>

  <!-- </transition> -->

  </div>
</template>

<script>

import MyHeaderVue from './components/common/MyHeader.vue';
import MyFooterVue from './components/common/MyFooter.vue';
import MyDialog from './components/common/Dialog.vue';
import LoginVue from './components/views/Login.vue';
import RegisterVue from './components/views/Register.vue';
import AboutVue from './components/views/About.vue';


export default {
  name: 'App',
  data() {
    return {
      com: "MyLogin"
    }
  },
  methods: {
    changeCom(com) {
      this.com = com;
    }


  },
  mounted: function () {
    var that = this;
    // this.$on("setCom", function (com) {
    //   console.log(this,that);
    //   that.com = com;
    // })

  },
  components: {
    MyHeader: MyHeaderVue,
    MyFooter: MyFooterVue,
    MyDialog: MyDialog,
    MyLogin: LoginVue,
    MyRegister: RegisterVue,
    MyAbout:AboutVue
  }
}
</script>

<style>
.myBody {
  /* height: calc(100vh - 170px); */
}
</style>
